<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8"/>
  <title>微美风铃</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Style/My/Default/css/wmfl.css"/>
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/Style/Common/zTreeStyle/zTreeStyle.css">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script src="__PUBLIC__/Style/My/Default/js/wmfl.js"></script>
  <script src="__PUBLIC__/Style/Common/js/Validform.min.js"></script>
  <script src="__PUBLIC__/Style/Common/js/storage.js"></script>
</head>

<body>
  <div class="container">
    
    <div class="position">
      
      <ol class="breadcrumb">
        <li>当前位置：</li>
        <volist name="positionPath" id="vo">
          <li><a href="{$vo.url}">{$vo.name}</a></li>
        </volist>
      </ol>
    </div>

    <div class="category-list">
      <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">栏目列表</h3>
          </div>
          <div class="panel-body">
          <div id="category-list-tree" class="ztree"></div>
        </div>
      </div>
    </div>
    
    <div class="category-content">
      <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{$actionTitle}</h3>
          </div>
          <div class="panel-body">
          <iframe src="__MODULE__/Content/list" id="list-iframe"></iframe>
        </div>
      </div>
    </div>
  </div>
  <style type="text/css">
    .category-list { position:absolute; width:170px; }
    .category-content { position:absolute; left:190px; right:15px; top:46px; bottom:20px; }
    .category-content .panel-default { height:95%; }
    .category-content .panel-body { height:95%; }
    #list-iframe { border:none; width:100%; height:100%; }
  </style>
  
  <script type="text/javascript" src="__PUBLIC__/Style/Common/zTreeStyle/jquery.ztree.all-3.5.min.js"></script>
  <script type="text/javascript">
   	var category = {$categoryJSON};
    var t = $("#category-list-tree");
    var setting = {
      data: {
        simpleData: {
          enable:true,
          idKey: "id",
          pIdKey: "pid",
          rootPId: ""
        }
      },
      callback:  {
        onClick: showList
      }
    }
    function showList(event, treeId, treeNode){
      if(!treeNode.isParent){
        $("#list-iframe").attr("src", "__MODULE__/Content/list/cat_id/"+ treeNode.id);  
      }
    }
    var treeObj = $.fn.zTree.init( t, setting, category);
    treeObj.expandAll(true);
  </script>
</body>
</html>